<template>
  <div class="wrap">
    <div class="page-head">
      <a-breadcrumb>
        <a-breadcrumb-item>{{ $t('auth.auth.60ze9ao16b80') }}</a-breadcrumb-item>
        <a-breadcrumb-item>{{ $t('auth.auth.60ze9ao1bdc0') }}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="table-scroll">
      <c-table  ref="tableRef"  :list="form.list" :loading="form.loading" v-model:data="form.data" row-key="id" v-bind:expanded-row-keys="expandedRowKeys"
        @refresh="getData">
        <a-table-column :title="$t('auth.auth.60ze9ao1bu80')" data-index="name" :width="160">
          <template #cell="{ record }">
            {{ record.name? record.name : '-' }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('auth.auth.60ze9ao1c1o0')" ellipsis tooltip :width="120">
          <template #cell="{ record }">
            <a-tag v-if="record?.type == 0">{{ $t('auth.auth.60ze9ao1c7s0') }}</a-tag>
            <a-tag v-else>{{ $t('auth.auth.60ze9ao1cek0') }}</a-tag>
          </template>
        </a-table-column>
        <a-table-column :title="$t('auth.auth.60ze91o11wg0')" ellipsis tooltip :width="120">
          <template #cell="{ record }">
            <component v-if="record.icon" :is="record.icon"></component>
            <div v-else>-</div>
          </template>
        </a-table-column>
        <a-table-column :title="$t('auth.auth.60ze9ao1crc0')" data-index="symbol" ellipsis tooltip :width="120">
          <template #cell="{ record }">
            {{ record.key? record.key : '-' }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('auth.auth.60ze9ao1cwo0')" data-index="url" ellipsis tooltip :width="120">
          <template #cell="{ record }">
            {{ record.url? record.url : '-' }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('auth.auth.60ze9ao1d5c0')" data-index="request" ellipsis tooltip :width="120">
          <template #cell="{ record }">
            {{ record.method? record.method : '-' }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('auth.auth.60ze9ao1dd80')" ellipsis tooltip :width="130">
          <template #cell="{ record }">
            <a-tag color="#f53f3f" v-if="record?.status == 1">{{ $t('auth.auth.60ze9ao1dhw0') }}</a-tag>
            <a-tag color="#00b42a" v-else>{{ $t('auth.auth.60ze9ao1doc0') }}</a-tag>
          </template>
        </a-table-column>
        <a-table-column :title="$t('auth.auth.60ze9ao1dwg0')" data-index="sort" ellipsis tooltip :width="100">
          <template #cell="{ record }">
            {{ record.sort }}
          </template>
        </a-table-column>
        <a-table-column :ellipsis="true" :title="$t('auth.auth.60ze9ao1e240')" :width="200">
          <template #cell="{ record }">
            {{ record.createTime ? dayjs.unix(record.createTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('auth.auth.60ze9ao1e7s0')" :width="150" fixed='right'>
          <template #cell="{ record }">
            <a-space>
              <a-button type="text" v-permission="['auth:add']" @click="form.create.show = true">{{ $t('auth.auth.60ze9ao1ecc0') }}</a-button>
              <a-button type="text" v-permission="['auth:edit']" @click="handleUpdata(record)">{{ $t('auth.auth.60ze9ao1eiw0') }}</a-button>
              <a-button type="text" v-permission="['auth:delete']" status="danger"
                @click="handleDelete(record)">{{ $t('auth.auth.60ze9ao1eq40') }}</a-button>
            </a-space>
          </template>
        </a-table-column>
      </c-table>
      <Create @refresh="getData" :list="form.list" v-model:pid="form.create.pid" v-model:show="form.create.show">
      </Create>
      <Updata @refresh="getData" :list="form.list" v-model:id="form.update.id" v-model:show="form.update.show"
        v-model:data="form.update.data"></Updata>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { apiAuthList, apiAuthDelete } from '@/api/setting'
import dayjs from 'dayjs'
const tableRef = ref()
const Create = defineAsyncComponent(() => import('./components/create.vue'))
const Updata = defineAsyncComponent(() => import('./components/updata.vue'))
const expandedRowKeys = ref([])
const form = reactive({
  create: {
    loading: false,
    show: false,
    pid: 0
  },
  update: {
    loading: false,
    show: false,
    data: {},
    id: 0
  },
  data: {
    keywords: '',
  },
  loading: false,
  list: [{
    id: 0,
    isMenu: 1,
    name: t('auth.auth.60ze9ao11wg0'),
    icon: '',
    key: 'root',
    createTime: 0,
    type: 0,
    pid: 0,
    method: '',
    status: 0,
    sort: 100,
    children: []
  }],
  // list: [],
} as any)
// 权限列表
const getData = async () => {
  form.loading = true
  const { code, data } = await apiAuthList()
  form.loading = false
  if (code != 200) return;
  form.list[0].children = data?.list || []
  nextTick(() => {
        tableRef.value?.expand(0)
    })
}
// 编辑
const handleUpdata = (record: any) => {
  form.update.data = cloneDeep(record)
  form.update.show = true
}
// 删除
const handleDelete = async (record: any) => {
  useModal.warning({
    content: t('auth.auth.60ze9ao1ewg0'),
    onBeforeOk: async () => {
      const { code } = await apiAuthDelete({
        id: record.id
      })
      if (code != 200) return false;
      useMessage.success()
      getData()
      return true
    }
  })
}
onBeforeMount(() => {
  getData()
})
</script>

<style scoped lang="less"></style>
